<template>
	<view :style="{ paddingTop:navbarStyle.paddingTop }">
		<view class="navbar" :style="navbarStyle">
			<view :style="props.headStyle" class="navbarVessel">
				<view class="navLeft">
					<view v-if="props.isShowBack" @click="backPrev">
						<view v-if="pagesTotal>=2">
							<up-icon name="arrow-left" color="#FFF" size="18"></up-icon>
						</view>
						<view v-else class="">
							<up-icon name="home" color="#FFF" size="18"></up-icon>
						</view>
					</view>
					<view v-else class="">
						<slot name="navLefts"></slot>
					</view>
				</view>
				<view class="navCenter">
					<slot></slot>
				</view>
				<view class="navRight" :style="{ right:weChatCapsuleWidth+'px' }">
					<slot name="navRights"></slot>
				</view>
			</view>
		</view>
		<view style="height: 42px;"></view>
	</view>
</template>

<script  setup lang="ts">
	/* 使用方法说明
		<Navbar :isShowBack="true">
			我是分包页面
		</Navbar>
		1.isShowBack 是否显示返回按钮 默认不显示 ，且绑定了返回事件，只需要传入一个变量，即可自动返回
		2.<template v-slot:navLefts>自定义导航栏左侧内容</template> 自定义左侧插槽用法 如果左侧不需要返回功能，也可自定义自己的模块，注意如果开启了isShowBack，插槽就会失效
		3.<template v-slot:navRights>右侧内容也可自定义，已适配了微信小程序右侧的胶囊问题 右侧宽度最大限制了60px
		4.headStyle 自定义导航样式的对象，留了一个入口，可根据需要自行配置
	*/
	import { ref,reactive,onMounted,defineProps } from 'vue';
	const props = defineProps({
		headStyle: {
			type:Object,
			default:{
				color:'#fff',
				background: 'linear-gradient(to right, #ff7e5f, #feb47b)'
			}
		},
		isShowBack:{
			type:Boolean,
			default:false
		}
	})
	const navbarStyle = reactive({
		paddingTop: '0',
		background:props.headStyle.background
	});
	const weChatCapsuleWidth = ref(10)
	const systemInfo =	uni.getSystemInfoSync()
	const pagesTotal = ref(1)
    onMounted(() => {
		navbarStyle.paddingTop = systemInfo.statusBarHeight + 'px'
		// #ifdef MP-WEIXIN
			// 适配微信小程序右上角胶囊
			weChatCapsuleWidth.value = uni.getMenuButtonBoundingClientRect().width + 10
		// #endif
		console.log('weChatInfo',weChatCapsuleWidth.value)
		// 获取当前页面栈实例数组
		 pagesTotal.value = getCurrentPages().length;
		console.log('pagesTotal',pagesTotal)
	})
	const backPrev = (()=>{
		if(pagesTotal.value >= 2){
			uni.navigateBack({
				delta:1
			})
			return
		}
		const userInfo = uni.getStorageSync('userInfo')
		if(userInfo){
			// 已经登录跳转到首页
			uni.reLaunch({
				url:'/pages/index/index'
			})
		}else{
			// 否则跳转到登陆页test
			uni.reLaunch({
				url:'/pages/login/index'
			})
		}
	})
</script>

<style lang="scss" scoped>
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
}
.navbarVessel{
	height: 42px;
	line-height: 42px;
	padding: 0 20rpx;
	display: flex;
	position: relative;
	padding: 0 20rpx;
	.navLeft{
		position: absolute;
		z-index: 111;
		top: 50%;
		transform: translateY(-50%);
	}
	.navCenter{
		flex: 1;
		text-align: center;
	}
	.navRight{
		position: absolute;
		z-index: 111;
		max-width: 60px;
		overflow: hidden;
		text-align: right;
		height: 42px;
	}
}
</style>